<template>

  <div class="windowInfo windowInfo4">

    <div style="width:100%;display:flex;border-bottom:1px solid ">

      <h4 style="width:100%;text-align:center">发包列表</h4>
      <!-- <a-button @click="handleClick" size='small' type='primary'>清除</a-button> -->
    </div>
    <!-- <h4 style="width:100%;text-align:center">导弹位置速度信息</h4> -->
    <div class='desBox'>
      <!-- <div v-if='dataSource.length>0' style="width:49%;height:100%"> -->
      <div v-if='dataSource.length == 0' style="width:100%;display: flex;
    justify-content: center;align-items: center;height:calc(100% - 50px)">
        <a-empty />
      </div>
      <a-list :grid="{ gutter: 16, column: 2 }" item-layout="horizontal" :data-source="dataSource" v-else
        style="width:100%;margin-left:20px;color: #fff;">
        <a-list-item style="cursor: pointer;" slot="renderItem" slot-scope="item" @click="handleClick(item.packName)">
          {{ item.packName }}
        </a-list-item>
      </a-list>


    </div>
    <configModal ref="configModal" />
  </div>
</template>

<script>
import configModal from './components/configModal.vue'
import { getAction, postAction } from '@/api/manage'
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['websocketMsg']),
    websocketMsg() {
      return this.$store.state.user.websocketMsg
    },
  },
  components: {
    configModal
  },
  watch: {
    websocketMsg: {
      handler(val) {
        let msg = JSON.parse(val)
        if (msg.cmd === 'MISSILE_TELEMETRY_INFO') {
          this.getList()
        } else if (msg.cmd === 'HOME_REFRESH') {
          // 解决指挥车退网后出发首页刷新时导弹位置信息不清空的问题
          this.getList()
        }
      },
    },
  },
  mounted() {
    // this.getList()
    // let desBox=document.getElementsByClassName('desBox')[0]

  },
  data() {
    return {
      url: {
        list: '/missile/nmcMissileInfo/getCurrentDayHomePagePartThreeVos'
      },
      dataSource: [
        {
          id: 1,
          packName: '移动车入网申请',
          packCode: '11指挥车入网申请',
          paramList: [
            {
              label: '发送端识别码',
              key: 'SenderCode',
              grid: '11-发送端识别码'
            },
            {
              label: '指控车识别码',
              key: 'vehicleIdentification',
              grid: '11-指挥车识别码'
            },
            {
              label: '入网认证码',
              key: 'NetworkCode',
              grid: '11-指挥车入网认证码'
            }
          ]
        },

        {
          id: 2,
          packName: '移动车入网确认',
          packCode: '13指挥车入网确认',
          paramList: [
            {
              label: '发送端识别码',
              key: 'SenderCode',
              grid: '13-发送端识别码'
            },
            {
              label: '指控车识别码',
              key: 'vehicleIdentification',
              grid: '13-指挥车的识别码'
            },
            {
              label: '入网状态',
              key: 'NetworkCode',
              grid: '13-指挥车的入网状态'
            }
          ]
        },
        {
          id: 3,
          packName: '移动车网络状态回复',
          packCode: '18指挥车网络状态回复',
          paramList: [
            {
              label: '发送端识别码',
              key: 'SenderCode',
              grid: '18-发送端识别码'
            },
            {
              label: '指控车识别码',
              key: 'vehicleIdentification',
              grid: '18-指挥车识别码'
            },
            {
              label: '在网状态',
              key: 'NetworkCode',
              grid: '18-指控车在网状态'
            },
            {
              label: '设备状态',
              key: 'EquipmentStatus',
              grid: '18-指挥车设备状态'
            },
            {
              label: '使用时隙个数',
              key: 'NumberSlotsUsed',
              grid: '18-使用时隙个数'
            },
            {
              label: '使用的时隙号',
              key: 'TimeSlotNumberUsed',
              grid: '18-使用具体的时隙号'
            },
            {
              label: '星指下行链路速率档位',
              key: 'SpeedGear',
              grid: '18-星指下行链路使用速率档位'
            },
            {
              label: '星指下行链路信噪比',
              key: 'SignalNoiseRatio',
              grid: '18-星指下行链路信噪比'
            }
          ]
        },
        {
          id: 4,
          packName: '移动车退网申请',
          packCode: '35指挥车退网申请',
          paramList: [
            {
              label: '发送端识别码',
              key: 'SenderCode',
              grid: '35-发送端识别码'
            },
            {
              label: '指控车识别码',
              key: 'vehicleIdentification',
              grid: '35-指挥车识别码'
            },
            {
              label: '入网认证码',
              key: 'NetworkCode',
              grid: '35-指挥车入网认证码'
            },
            {
              label: '各弹均完成退网标识符',
              key: 'NetworkWithdrawalIdentifier',
              grid: "35-各弹均完成退网标识符"
            }
          ]
        },
        {
          id: 5,
          packName: '移动车退网确认',
          packCode: '37指挥车退网确认',
          paramList: [
            {
              label: '发送端识别码',
              key: 'SenderCode',
              grid: '37-发送端识别码'
            },
            {
              label: '指控车识别码',
              key: 'OfflineStatus',
              grid: '37-该指挥车的退网状态'
            },
          ]
        },
        {
          id: 6,
          packName: '星车周期交互启动',
          packCode: '42星车周期交互启动指令',
          paramList: [
            {
              label: '发送端识别码',
              key: 'SenderCode',
              grid: '43-发送端识别码'
            },
            {
              label: '武器平台识别码',
              key: 'WeaponPlatformIdentificationCode',
              grid: '42-武器平台识别码'
            },
            {
              label: '星车交互启动指令码',
              key: 'CommandCode',
              grid: '42-星车交互启动指令码'
            },
          ]
        },
        {
          id: 7,
          packName: '星车对时',
          packCode: '49星车对时指令',
          paramList: [
            {
              label: '发送端识别码',
              key: 'SenderCode',
              grid: '49-发送端识别码'
            },
            {
              label: '对时指令',
              key: 'TimingInstruction',
              grid: '49-对时指令'
            },
          ]
        },
        {
          id: 8,
          packName: '链路测试指令',
          packCode: '47链路测试',
          paramList: [
            {
              label: '发送端识别码',
              key: 'SenderCode',
              grid: '47-发送端识别码'
            },
            {
              label: '测试码字',
              key: 'TestCodeWords',
              grid: '47-测试码字'
            },
          ]
        },
        {
          id: 9,
          packName: '车-车自定义信息',
          packCode: '129-车-车自定义信息',
          paramList: [
            {
              label: '发送端识别码',
              key: 'SenderCode',
              grid: '129-发送端识别码'
            },
            {
              label: '有效内容',
              key: 'EffectiveContent',
              grid: '129-有效内容'
            },
          ]
        },
        {
          id: 10,
          packName: '车-地自定义信息',
          packCode: '130-车-地自定义消息',
          paramList: [
            {
              label: '发送端识别码',
              key: 'SenderCode',
              grid: '130-发送端识别码'
            },
            {
              label: '有效内容',
              key: 'EffectiveContent',
              grid: '130-有效内容'
            },
          ]
        },
      ],

    }
  },
  methods: {
    handleClick(name) {
      this.dataSource.find(i => {
        if (i.packName == name) {
          this.$refs.configModal.showModal(i)
        }
      })
    },
    getList() {
      let that = this;
      getAction(this.url.list).then(res => {
        if (res.success) {
          that.dataSource = res.result
        } else {
          that.$message.error("获取导弹位置信息失败！");
        }
      })
    }
  }

}
</script>

<style lang='less' scoped>
/* 四角边框--start */
.windowInfo {
  position: relative;
  border: 2px solid #58d0f3 !important;
  z-index: 1;
  padding: 5px 2px;
  font-size: 16px;
  background: #062f63 !important;
}

.windowInfo::before {
  position: absolute;
  content: '';
  top: -2px;
  bottom: -2px;
  left: 30px;
  width: calc(100% - 60px);
  /* border-top: 2px solid #016886; */
  /* border-bottom: 2px solid #016886; */
  border-bottom: 0px solid #4f78ae !important;
  border-top: 2px solid #4f78ae !important;
  z-index: -1;
}

.windowInfo::after {
  position: absolute;
  content: '';
  top: 30px;
  right: -2px;
  left: -2px;
  height: calc(100% - 60px);
  border-right: 2px solid #4f78ae !important;
  border-left: 2px solid #4f78ae !important;
  z-index: -1;
}

.desBox {
  width: 100%;
  display: flex;
  // flex: 1;
  // border:1px solid red;
  // height:100%;
  flex-wrap: wrap;

  .itemBox {
    width: 50%;
    height: 100%;
    display: flex;
    color: #fff;

    .ant-descriptions-item-label .ant-descriptions-item-colon {
      color: #fff;
    }

    .idBox {
      width: 50px;
      // height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid;
    }

  }
}

.ant-list-split .ant-list-item {
  border: none;

}

.ant-list-item {
  padding: 5px 0
}
</style>
<style>
.desBox .ant-descriptions-bordered .ant-descriptions-item-label {
  background: transparent !important;
  color: #fff !important;
  min-width: 100px !important;
}

.ant-descriptions-bordered.ant-descriptions-small .ant-descriptions-item-label,
.ant-descriptions-bordered.ant-descriptions-small .ant-descriptions-item-content {
  padding: 4px 3px;
}

.desBox .ant-descriptions-bordered .ant-descriptions-view {

  /* height: 100% !important; */
  border-radius: 0 !important;
}
</style>